From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/routes/archives/[id]/+page.svelte | 65 +++++++++-----------------
 1 file changed, 23 insertions(+), 42 deletions(-)

(limited to 'frontend/src/routes/archives/[id]/+page.svelte')

diff --git a/frontend/src/routes/archives/[id]/+page.svelte b/frontend/src/routes/archives/[id]/+page.svelte
index 50a2940..56c3273 100644
--- a/frontend/src/routes/archives/[id]/+page.svelte
+++ b/frontend/src/routes/archives/[id]/+page.svelte
@@ -2,9 +2,6 @@
 	import { updateArchives } from '$gql/Mutations';
 	import { archiveQuery } from '$gql/Queries';
 	import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql';
-	import { initReaderContext } from '$lib/Reader';
-	import { initSelectionContext } from '$lib/Selection';
-	import { setTabContext } from '$lib/Tabs';
 	import { toastFinally } from '$lib/Toasts';
 	import Guard from '$lib/components/Guard.svelte';
 	import Head from '$lib/components/Head.svelte';
@@ -12,52 +9,40 @@
 	import Grid from '$lib/containers/Grid.svelte';
 	import Gallery from '$lib/gallery/Gallery.svelte';
 	import PageView from '$lib/reader/PageView.svelte';
-	import Reader from '$lib/reader/Reader.svelte';
+	import Reader, { initReaderContext } from '$lib/reader/Reader.svelte';
+	import { initSelectionContext } from '$lib/selection/Selection.svelte';
 	import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte';
 	import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte';
 	import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte';
 	import Tab from '$lib/tabs/Tab.svelte';
 	import Tabs from '$lib/tabs/Tabs.svelte';
 	import { getContextClient } from '@urql/svelte';
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
-	export let data: PageData;
+	let { data }: PageProps = $props();
 	const client = getContextClient();
 	const reader = initReaderContext();
-	setTabContext({
-		tabs: {
-			details: { title: 'Details' },
-			edit: { title: 'Edit' },
-			deletion: { title: 'Delete' }
-		},
-		current: 'details'
-	});
-
-	$: result = archiveQuery(client, { id: data.id });
 
-	function updateCover(event: CustomEvent<number>) {
-		updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch(
-			toastFinally
-		);
+	function updateCover(id: number) {
+		updateArchives(client, { ids: data.id, input: { cover: { id } } }).catch(toastFinally);
 	}
 
-	let archive: FullArchiveFragment;
+	let selection = initSelectionContext<PageFragment>(
+		'Page',
+		(p) => p.path,
+		(p) => p.comicId === null
+	);
 
-	$: $result, update();
-	function update() {
-		if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
-			archive = structuredClone($result.data.archive);
+	let result = $derived(archiveQuery(client, { id: data.id }));
+	let archive: FullArchiveFragment | undefined = $state();
 
-			$reader.pages = archive.pages;
+	$effect(() => {
+		if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
+			archive = $result.data.archive;
+			reader.pages = $result.data.archive.pages;
+			selection.view = $result.data.archive.pages;
 		}
-	}
-
-	const selection = initSelectionContext<PageFragment>('Page', (p) => p.path);
-	$selection.selectable = (p) => p.comicId === null;
-
-	$: if (archive) {
-		$selection.view = archive.pages;
-	}
+	});
 </script>
 
 <Head section="Archive" title={archive?.name} />
@@ -70,24 +55,20 @@
 
 		<aside>
 			<Tabs>
-				<Tab id="details">
+				<Tab initial id="details" title="Details">
 					<ArchiveDetails {archive} />
 				</Tab>
-				<Tab id="edit">
+				<Tab id="edit" title="Edit">
 					<ArchiveEdit {archive} />
 				</Tab>
-				<Tab id="deletion">
+				<Tab id="deletion" title="Delete">
 					<ArchiveDelete {archive} />
 				</Tab>
 			</Tabs>
 		</aside>
 
 		<main class="overflow-auto">
-			<Gallery
-				pages={archive.pages}
-				on:open={(e) => ($reader = $reader.open(e.detail))}
-				on:cover={updateCover}
-			/>
+			<Gallery pages={archive.pages} open={reader.open} {updateCover} />
 		</main>
 	</Grid>
 {:else}
-- 
cgit v1.2.3-2-gb3c3

